<template>
    <div class="launch">
        <div class="body center">
            <div class="loading">
                <div class="spinner"></div>
            </div>
            <div class="text">ShellWorld</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loginState: null
        };
    },
    created() {
        const loginState = this.$login.hasLoginState();
        this.loginState = loginState;
        console.log("登录状态", loginState);
    },
    mounted() {
        this.toNextPage();
    },
    methods: {
        toNextPage() {
            // if (!this.loginState) {
            //     this.$showModal({
            //         title: "请登录",
            //         content: "你还未登录，即将跳转登录页面...",
            //         cancelText: "暂不登录",
            //         cancel: () => {
            //             this.onRedirect();
            //         },
            //         confirm: () => {
            //             setTimeout(() => {
            //                 this.$router.replace({
            //                     path: "/login/index"
            //                 });
            //             }, 1000);
            //         }
            //     });

            //     return;
            // }
            this.onRedirect();
        },
        onRedirect() {
            const redirectPath = this.$route.query.redirectPath;
            if (redirectPath !== "/home/index") {
                setTimeout(() => {
                    this.$router.replace({
                        path: redirectPath
                        // query: {
                        //     scene: "redirect"
                        // }
                    });
                }, 1000);
                return;
            }

            setTimeout(() => {
                this.$router.replace({
                    path: "/home/index"
                });
            }, 1000);
        }
    }
};
</script>


<style lang="less" scoped>
.launch {
    .body {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-90%);

        .text {
            font-weight: bold;
            font-size: 32px;
            margin-top: -10px;
        }
    }
    .loading {
        transform: scale(2);
    }
    .spinner {
        width: 60px;
        height: 60px;
        background-color: #67cf22;

        margin: 100px auto;
        -webkit-animation: rotateplane 1.2s infinite ease-in-out;
        animation: rotateplane 1.2s infinite ease-in-out;
    }

    @-webkit-keyframes rotateplane {
        0% {
            -webkit-transform: perspective(120px);
        }
        50% {
            -webkit-transform: perspective(120px) rotateY(180deg);
        }
        100% {
            -webkit-transform: perspective(120px) rotateY(180deg)
                rotateX(180deg);
        }
    }

    @keyframes rotateplane {
        0% {
            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        }
        50% {
            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            -webkit-transform: perspective(120px) rotateX(-180.1deg)
                rotateY(0deg);
        }
        100% {
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            -webkit-transform: perspective(120px) rotateX(-180deg)
                rotateY(-179.9deg);
        }
    }
}
</style>